<template>
  <div class="large">
    <el-container>
      <el-aside width="30%" class="aside">
        <div>
          <div class="card1">
            <div class="avatar_box">
              <img class="image" src="../../assets/image.jpg" alt>
              <h1 class="h1">头像</h1>
            </div>
          </div>
          <div class="card2">
            <span class="span_fujian">附件管理</span><br>
            <el-button type="success">上传简历</el-button>
            <el-button type="info">上传视频</el-button>
          </div>
          <div class="card3">
            <img class="img" src="../../assets/img1.png" alt>
          </div>
        </div>
      </el-aside>
      <el-main>
        <div class="main">
          <el-form :model="userForm" label-width="100px" class="form">
            <!-- 用户名 -->
            <span class="span">用户名</span>
            <el-form-item class="item" prop="userName">
              <el-input v-model="userForm.userName" class="input" />
            </el-form-item>
            <!-- 密码 -->
            <!--            <span class="span">密码</span>-->
            <!--            <el-form-item class="item" prop="user_password">-->
            <!--              <el-input class="input" />-->
            <!--            </el-form-item>-->
            <!-- 状态选择 -->
            <span class="span">现状态</span>
            <el-form-item class="item" prop="user_password">
              <el-input v-model="userForm.userState" class="input" />
            </el-form-item>
            <span class="span">生日</span>
            <el-date-picker
              v-model="userForm.userBirthday"
              type="date"
              placeholder="选择日期"
            />

            <!--   手机号   -->
            <span class="span">手机号</span>
            <el-form-item class="item" prop="user_phone">
              <el-input v-model="userForm.userPhone" class="input" />
            </el-form-item>
            <span class="span">学历</span>
            <el-form-item class="item" prop="user_academic">
              <el-input v-model="userForm.userAcademic" class="input" />
            </el-form-item>
            <span class="span">年级</span>
            <el-form-item class="item" prop="user_role">
              <el-input v-model="userForm.userRole" class="input" />
            </el-form-item>
            <el-button type="primary" @click="addUser">确 定</el-button>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userForm: {
        userId: '',
        userName: '',
        userPassword: '',
        userImage: '',
        userState: '',
        userBirthday: '',
        userPhone: '',
        userAcademic: '',
        userRole: ''
      }
    }
  }
}
</script>

<style lang="scss" >
  .large{
    background-color: #f6f6f8;
  }
  .span{
    color: black;
  }
  .box{
    position: absolute;
    margin-left: 10%;
    margin-top: 4%;
    margin-bottom: 4%;
    width: 80%;
    height: 86%;
    background-color: #f6f6f8;
  }
  .avatar_box{
    margin-top: 80px;
    margin-left: -400px;
    background-color: #ffffff;
    width: 130px;
    height: 130px;
    // border: 1px solid #eee;
    border-radius: 50%;
    padding: 0.1px;
    box-shadow: 0 0 5px #eee;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .image{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #243F58;
  }
  .h1{
    position: absolute;
    margin-top: 5px;
    margin-left: 55px;
    size: 40px;
    color: #1e272e;
  }
  .span{
    margin-top: 40px;
  }
  .item .el-form-item__label{
    color: #12ADA9;
  }
  .input .el-input__inner{
    margin-left: -80px;
    margin-top: 5px;
    width: 380px;
    color: #12ADA9;
    border-radius: 0;
  }
  .input .el-input__inner:hover{
    border-color: #12ADA9;
  }
  .input .el-input__inner:focus{
    border-color: #12ADA9;
  }
  .select:hover{
    border-color: #12ADA9;
  }
  .block{
    margin-top: 20px;
    width: 380px;
    color: #12ADA9;
    border-radius: 0;
  }

  .el-button--primary {
    color: #fff;
    margin-top: 20px;
    background-color: #00C2B3;
    border-color: #00C2B3;
    width: 380px;
    border-radius: 0px;
  }
  .el-button--primary:hover {
    color: #fff;
    background-color: #12ADA9;
    border-color: #12ADA9;
  }
  .el-button--primary:focus {
    color: #fff;
    background-color: #12ADA9;
    border-color: #12ADA9;
  }
  .aside{
  }
  .main{
    margin-left: 30px;
    margin-top: 30px;
    width: 700px;
    height: 640px;
    background-color: #ffffff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .10);
  }
  .card1{
    margin-top: 50px;
    margin-left: 50px;
    width: 300px;
    height: 180px;
    background-color: #ffffff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .10);
  }
  .card2{
    margin-top: 50px;
    margin-left: 50px;
    width: 300px;
    height: 180px;
    background-color: #ffffff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .10);
  }
  .card3{
    margin-top: 50px;
    margin-left: 50px;
    width: 300px;
    height: 180px;
    background-color: #ffffff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .10);
  }

  .el-button--success {
    margin-top: 36px;
    color: #fff;
    margin-left: 10px;
    background-color: #00C2B3;
    border-color: #00C2B3;
    width: 260px;
    border-radius: 0px;
  }
  .el-button--success:hover {
    color: #fff;
    background-color: #12ADA9;
    border-color: #12ADA9;
  }
  .el-button--success:focus {
    color: #fff;
    background-color: #12ADA9;
    border-color: #12ADA9;
  }
  .el-button--info{
    margin-top: 20px;
    background-color: #ffffff;
    color: #00C2B3;
    width: 260px;
    border-color: #00C2B3;
    border-radius: 0px;
  }
  .el-button--info:hover{
    background-color: #ffffff;
    color: #12ADA9;
    border-color: #12ADA9;
  }
  .el-button--info:focus{
    background-color: #ffffff;
    color: #12ADA9;
    border-color: #12ADA9;
  }
  .span_fujian{
    position: absolute;
    margin-top: 15px;
    font-size: 18px;
    margin-left: -120px;
    color: #1e272e;
  }
  .img{
    width: 100%;
    height: 100%;
  }
</style>
